<template>
  <div class="emission-reduction-factor-box">
    <el-form ref="form" :model="formData" :rules="rules" label-width="120px">
      <template v-for="(item, index) in formList">
        <el-form-item
            :key="`${item.prop}${index}`"
            :style="item.itemStyle || {}"
            :label="item.name"
            :prop="item.prop"
            :class="item.itemClass"
        >
          <component
              :is="item.componentType || 'el-input'"
              v-if="item.prop"
              v-model="formData[item.prop]"
              :clearable="true"
              :class="item.class"
              v-bind="item.attrConfig || {}"
              @change="handlerSelectData(item)"
          >
            <template v-for="option in item.optionList">
              <el-option
                  :key="option.code"
                  :label="option.name"
                  :value="option.code"
              />
            </template>
          </component>
        </el-form-item>
      </template>
    </el-form>
  </div>
</template>

<script>
  import {dictMixin} from '@/mixin/dict'

  export default {
    name: 'AddEmissionReductionFactor',
    mixins:[dictMixin],
    props: {
      // 请求参数
      requestParams: {
        type: Object,
        default: () => ({})
      },
      // 弹窗数据
      popData: {
        type: Object,
        default: () => ({})
      },
      // 弹窗配置
      popConfig: {
        type: Object,
        default: () => ({})
      },
      // 弹窗取消
      close: {
        type: Boolean,
        default: false
      },
      // 弹窗确认
      confirm: {
        type: Boolean,
        default: false
      }
    },
    data() {
      return {
        isAdd: true,
        formData: {
          label: '',
          value: '',
          remark: ''
        },
        formList: [
          {
            name: '数据日期',
            prop: 'solidifyDate',
            attrConfig: {
              type: 'month',
              style: { width: '100%' },
              placeholder: '请输入数据日期',
              format: 'yyyy-MM',
              'value-format': 'yyyy-MM'
            },
            componentType: 'el-date-picker'
          },
          {
            name: '能源种类',
            prop: 'energyTypeId',
            componentType: 'el-select',
            optionList: [],
            selectPath: 'commonSelected',
            selectParams: {
              code: 'EnergyConsumptionTypeSelected'
            },
            attrConfig: {
              placeholder: '请选择能源种类',
              style: { width: '100%' },
              options: []
            },
            dataProp: {
              dataType: 'resData',
              nameProp: 'label',
              codeProp: 'value'
            }
          },
          {
            name: '单位',
            prop: 'unit',
            attrConfig: { placeholder: '请输入单位' }
          },
          {
            name: '折标准煤系数',
            prop: 'coefficient',
            componentType: 'el-input-number',
            attrConfig: {
              min: 0,
              max: 99999999,
              precision: 5,
              style: { width: '100%' },
              placeholder: '请输入折标准煤系数'
            }
          }
        ]
      }
    },
    computed: {
      rules() {
        return {
          solidifyDate: [{ required: true, message: '请选择数据日期', trigger: 'blur' }],
          energyTypeId: [{ required: true, message: '请选择能源类型', trigger: 'blur' }],
          factor: [
            { required: true, type: 'number', message: '请输入折标准煤系数', trigger: 'blur' }
          ],
          unit: [
            { required: true, message: '请输入单位', trigger: 'blur' },
            { max: 10, message: '单位最多10字符', trigger: 'blur' }
          ]
        }
      }
    },
    watch: {
      popData: {
        handler(data) {
          this.isAdd = !data.id
          this.formList.forEach((e) => {
            this.$set(this.formData, e.prop, data[e.prop])
          })
          this.$set(this.formData, 'id', data.id)
        },
        deep: true,
        immediate: true
      },
      confirm() {
        const params = {
          ...(this.formData || {})
        }
        this.submit(params)
      }
    },
    methods: {
      /**
       * change事件
       */
      handlerSelectData(config) {
        const Ref = this.$refs[config.prop]
        if (Ref && config.isClosePop) {
          Ref.dropDownVisible = false
        }
      },
      /**
       * 提交
       */
      submit(params) {
        this.$refs.form.validate(async (valid) => {
          if (valid) {
            const res = await this.$api.convertStandardCoalCoefficient[
              this.isAdd ? 'add' : 'update'
            ](params)
            if (Number(res.code) === 1000) {
              this.$message.success(`${this.isAdd ? '新增' : '编辑'}成功！`)
              this.$emit('onFinish', 'convertStandardCoalCoefficient-add')
            } else if (res.msg) {
              this.$message({ type: 'error', message: res.msg })
            }
          }
        })
      }
    }
  }
</script>

<!--<style lang="scss" scoped>-->
<!--  .emission-reduction-factor-box {-->
<!--    color: #333;-->
<!--    padding: 0 20px;-->

<!--    ::v-deep .el-form {-->
<!--      display: flex;-->
<!--      flex-wrap: wrap;-->
<!--      justify-content: space-between;-->

<!--      .el-form-item {-->
<!--        width: calc(50% - 10px);-->

<!--        &.width100p {-->
<!--          width: 100%;-->
<!--        }-->

<!--        .el-form-item__label {-->
<!--          color: #666;-->
<!--          font-size: 14px;-->
<!--        }-->

<!--        &.form-sub-title {-->
<!--          width: 100%;-->

<!--          .el-form-item__label {-->
<!--            display: flex;-->
<!--            align-items: center;-->
<!--            justify-content: flex-start;-->
<!--            font-weight: bold;-->
<!--            color: #333;-->
<!--            font-size: 16px;-->
<!--            line-height: 1;-->

<!--            &::before {-->
<!--              content: '';-->
<!--              display: inline-block;-->
<!--              width: 4px;-->
<!--              height: 15px;-->
<!--              background-color: #00858d;-->
<!--              margin-right: 5px;-->
<!--            }-->
<!--          }-->
<!--        }-->
<!--      }-->

<!--      .el-select,-->
<!--      .el-cascader {-->
<!--        width: 100%;-->
<!--      }-->
<!--    }-->
<!--  }-->
<!--</style>-->
